<template>
  <nav class="mui-bar mui-bar-tab z-bar">
    <div v-for="(menu, index) in menus" :key="index" :class="{'mui-active':menu.pagePath==currentPath}" class="mui-tab-item" v-tap="{method:cutMenu,params:menu.pagePath}">
      <span :class="menu.icon"></span>
      <span class="mui-tab-label">{{menu.label}}</span>
    </div>
  </nav>
</template>

<script>
  export default {
    data () {
      return {
      }
    },
    props: {
      menus:{
        type:Array,
        required:true
      }
    },
    methods:{
      cutMenu:function(pagePath){
        this.$router.replace(pagePath);
      }
    },
    computed: {
      currentPath: function(){
        return this.$store.state.common.currentPath;
      }
    }
  }
</script>

<style scoped lang="less">
  .z-bar{
    -webkit-box-shadow: 0 0 1px #ccc;
    box-shadow: 0 0 1px #ccc;
    .mui-tab-item.mui-active {
      color: #3c8eff;
    }
  }
</style>
